<%--
  Created by IntelliJ IDEA.
  User: cy123
  Date: 2021/11/3
  Time: 20:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<html>
<head>
    <title>Title</title>
    <link rel="stylesheet" href="resource/css/index.css">
    <script type="text/javascript" src="resource/js/jquery-3.2.1.js"></script>
</head>
<body>
    <form:form action="insert" method="post" modelAttribute="movie" enctype="multipart/form-data">
        电影名称:<form:input path="name"></form:input>
                <span id="sp1" style="color:red;"></span><br><br>
        电影上映时间:<form:input path="date" type="date"></form:input>
                    <span id="sp2" style="color:red;"></span><br><br>
        电影价格:<form:input path="price"></form:input>
                <span id="sp3" style="color:red;"></span><br><br>
        电影简介:<form:input path="content"></form:input>
                <span id="sp4" style="color:red;"></span><br><br>
        导演:<form:select path="did">
                <form:option value="" label="请选择"></form:option>
                <form:options items="${dir}" itemValue="id" itemLabel="name"></form:options>
            </form:select><span id="sp6"></span><br><br>
        电影宣传图:<input type="file" name="file" onchange="fe()">
                 <img id="tp" width="50" height="50">
                 <form:hidden path="pic"></form:hidden><span id="sp5" style="color:red;"></span><br><br>
        电影主演:<input type="button" value="+" onclick="add()">
        <span id="sp">
            <p>主演1名称:<input type="text" name="list[0].name">身份证号码:<input type="text" name="list[0].card"><input type="button" onclick="del(this)" value="-"><br></p>
        </span>
        <input type="button" onclick="tj()" value="新增">
    </form:form>
    <script>
        var i = $("p").length;
        function fe(){
            var da = new FormData($("form")[0]);
            $.ajax({
                url:"file",
                data:da,
                type:"post",
                contentType:false,
                processData:false,
                success:function (msg){
                    $("#tp").attr("src",msg);
                    $("#pic").val(msg);
                }
            })
        }
        function del(thin){
            var a = $("p").length;
            if(a>1){
                $(thin).parent().remove();
            }else{
                alert("至少保留一个")
            }
        }
        function add(){
            var b = $("p").length;
            $("#sp").append("<p>主演"+(++b)+"名称:<input type='text' name='list["+i+"].name'>身份证号码:<input type='text' name='list["+i+"].card'><input type='button' onclick='del(this)' value='-'><br></p>");
            i++;
        }
        function tj(){
            var flag = true;
            var name = $("[name=name]").val();
            if(name!=''){
                var reg = /^[\u4e00-\u9fa5]{1,10}$/
                if(reg.test(name)){
                    $("#sp1").html("");
                }else {
                    $("#sp1").html("电影名称只能为一到十位数字");
                    flag=false;
                }
            }else{
                $("#sp1").html("电影名称不能为空");
                flag=false;
            }
            var date= $("[name=date]").val();
            if(date!=''){
                $("#sp2").html("");
            }else{
                $("#sp2").html("电影上映时间必须选择");
                flag=false;
            }
            var price = $("[name=price]").val();
            if(price!=''){
                var reg = /^\d+(.\d{1,2})?$/;
                if(reg.test(price)){
                    $("#sp3").html("");
                }else {
                    $("#sp3").html("价格只能是整数或后面一到两位小数");
                    flag=false;
                }
            }else {
                $("#sp3").html("价格不能为空");
                flag=false;
            }
            var content = $("[name=content]").val();
            if(content!=''){
                var reg = /^[\u4e00-\u9fa5]+$/;
                if(reg.test(content)){
                    $("#sp4").html("");
                }else {
                    $("#sp4").html("电影简介只能为中文");
                    flag=false;
                }
            }else {
                $("#sp4").html("电影简介不能为空");
                flag=false;
            }
            var pic = $("[name=pic]").val();
            if(pic!=''){

            }else{
                $("#sp5").html("电影宣传图还未选择");
                flag=false;
            }
            var dy = $("option:selected").val();
            if(dy!=''){

            }else {
                $("#sp6").html("导演必须选择");
            }
            if(flag){
                $("form").submit();
            }
        }
    </script>
</body>
</html>
